<template>
  <div>
    <el-card class="box-card" shadow="hover">
      <div>
        <!-- 输入框-->
        <div v-clickoutside="hideReplyBtn" @click="inputFocus" class="my-reply">
          <el-row :gutter="24">
            <el-col :span="1.5">
              <el-avatar
                class="header-img"
                :size="40"
                :src="myHeader"
              ></el-avatar>
            </el-col>
            <el-col :span="18">
              <div class="reply-info">
                <div
                  tabindex="0"
                  contenteditable="true"
                  id="replyInput"
                  spellcheck="false"
                  placeholder="输入评论..."
                  class="reply-input"
                  @focus="showReplyBtn"
                  @input="onDivInput($event)"
                ></div>
              </div>
            </el-col>
            <el-col :span="4">
              <div v-show="btnShow">
                <el-button
                  class="reply-btn"
                  size="medium"
                  @click="sendComment"
                  type="primary"
                  >发表评论
                </el-button>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- <ul class="infinite-list" v-infinite-scroll="load" style="
			/*设置最大高度位300px  多出来的自适应成滚动条*/ max-height: 300px; overflow: scroll"> -->
        <div style="height:900px; overflow:auto;">
          <div
            v-for="(item, i) in comments"
            :key="i"
            class="author-title reply-father"
          >
            <el-avatar
              class="header-img"
              :size="40"
              :src="item.headImg"
            ></el-avatar>
            <!-- 姓名时间 -->
            <div class="author-info">
              <span class="author-name">{{ item.name }}</span>
              <span class="author-time">{{ item.time }}</span>
            </div>
            <!-- 每行后边两个按钮 -->
            <div class="icon-btn">
              <!-- <el-button @click="showReplyInput(i, item.name, item.id)" type="info" icon="el-icon-s-comment" style="size: 50px;">
					  {{item.commentNum}}
				  </el-button> -->
              <!-- 回复条数 -->
              <span @click="showReplyInput(i, item.name, item.id)">
                <i class="iconfont el-icon-s-comment">{{ item.commentNum }}</i>
              </span>
              <!-- 点赞个数 -->
              <span @click="showReplyInput(i, item.name, item.id)">
                <svg
                  t="1637753828895"
                  class="iconfont"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="2635"
                  width="15"
                  height="15"
                >
                  <path
                    d="M758.278079 944.873872 547.287691 944.873872c-100.787474 0-161.863505-50.627051-184.855148-69.687152-0.013303-0.011256-0.026606-0.022513-0.040932-0.033769-2.64934-2.193968-5.983271-3.39533-9.423627-3.39533l-43.014676 0c-11.04966 0-20.007683-8.958022-20.007683-20.007683L289.945625 434.489672c0-11.04966 8.958022-20.007683 20.007683-20.007683l37.262672 0c13.036921-0.756223 82.824357-35.603893 124.526131-106.597807 13.31526-22.648836 20.002566-49.751101 24.63405-99.899244 0.847298-18.690688-0.061398-35.022655-0.862647-49.445132-1.546216-27.789926-2.76702-49.741891 11.976776-64.801888 0.148379-0.150426 0.299829-0.300852 0.453325-0.447185 3.939729-3.777023 13.165858-12.600993 59.734476-11.248182 19.515473 0.574075 45.288462 3.124154 59.09491 8.55791 53.226249 21.004383 68.561515 59.446927 72.057129 87.998193 12.636808 102.726639-35.005258 199.411679-45.065382 218.423685-1.682315 4.01136-1.302669 8.124028 1.029446 11.761881 2.309602 3.589758 6.288217 5.664 10.897188 5.664l179.036629 0c75.977415 0 116.137067 38.145785 116.137067 110.313431 0 74.061786-46.677089 212.747405-74.566276 295.608601-7.375991 21.916149-13.201673 39.225373-15.471366 47.559179-0.107447 0.355087-0.210801 0.695848-0.318248 1.050935C854.680686 915.791509 811.66601 944.873872 758.278079 944.873872z"
                    p-id="2636"
                    fill="#515151"
                  ></path>
                  <path
                    d="M209.915917 871.926466 84.531232 871.926466c-11.04966 0-20.007683-8.958022-20.007683-20.007683L64.523549 434.489672c0-11.048637 8.958022-20.007683 20.007683-20.007683l125.384685 0c11.04966 0 20.007683 8.958022 20.007683 20.007683l0 417.429111C229.9236 862.96742 220.966601 871.926466 209.915917 871.926466z"
                    p-id="2637"
                    fill="#515151"
                  ></path>
                  {{ item.like }}
                </svg>
              </span>
            </div>

            <div class="talk-box">
              <p>
                <span class="reply">{{ item.comment }}</span>
              </p>
            </div>
            <div class="reply-box">
              <div
                v-for="(reply, j) in item.reply"
                :key="j"
                class="author-title"
              >
                <el-avatar
                  class="header-img"
                  :size="40"
                  :src="reply.fromHeadImg"
                >
                </el-avatar>
                <div class="author-info">
                  <span class="author-name">{{ reply.from }}</span>
                  <span class="author-time">{{ reply.time }}</span>
                </div>

                <!-- 二级右侧图标 -->
                <div class="icon-btn">
                  <span @click="showReplyInput(i, reply.from, reply.id)">
                    <i class="iconfont el-icon-s-comment"></i>
                    {{ reply.commentNum }}
                  </span>
                  <i class="iconfont el-icon-caret-top"></i>
                  {{ reply.like }}
                </div>

                <div class="talk-box">
                  <p>
                    <span>回复 {{ reply.to }}:</span>
                    <span class="reply">{{ reply.comment }}</span>
                  </p>
                </div>
                <div class="reply-box"></div>
              </div>
            </div>

            <!-- 二级回复框-->
            <div v-show="_inputShow(i)" class="my-reply my-comment-reply">
              <el-row :gutter="24">
                <el-col :span="1.5">
                  <el-avatar
                    class="header-img"
                    :size="40"
                    :src="myHeader"
                  ></el-avatar>
                </el-col>

                <el-col :span="17">
                  <div class="reply-info">
                    <div
                      tabindex="0"
                      contenteditable="true"
                      spellcheck="false"
                      placeholder="输入评论..."
                      @input="onDivInput($event)"
                      class="reply-input reply-comment-input"
                    ></div>
                  </div>
                </el-col>
                <el-col :span="4">
                  <el-button
                    class="reply-btn"
                    size="medium"
                    @click="sendCommentReply(i, j)"
                    type="primary"
                    >发表评论
                  </el-button>
                </el-col>
                <!-- </div> -->
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
const clickoutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function documentHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false;
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e);
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.vueClickOutside = documentHandler;
    document.addEventListener("click", documentHandler);
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener("click", el.vueClickOutside);
    delete el.vueClickOutside;
  }
};
export default {
  name: "ArticleComment",
  data() {
    return {
      btnShow: false,

      index: "0",
      replyComment: "",
      myName: "张少贺",
      myHeader: "http://localhost:8080/img/christian.8c64339c.jpg",

      // "./assets/img/avatar.jpg",
      // "E:/ready/vue-material-kit-master/src/assets/img/faces/avatar.jpg",
      // "https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg",
      myId: 19870621,
      to: "",
      toId: -1,
      comments: [
        {
          name: "易烊千玺",
          id: 19870621,
          headImg: "http://localhost:8080/img/christian.8c64339c.jpg",
          comment: "我发布一张新专辑Norman Fucking Rockwell,大家快来听啊",
          time: "2019年9月16日 18:43",
          commentNum: 2,
          like: 15,
          inputShow: false,
          reply: [
            {
              from: "张三",
              fromId: 19891221,
              fromHeadImg: "http://localhost:8080/img/avatar.cc93a967.jpg",
              to: "易烊千玺",
              toId: 19870621,
              comment: "我很喜欢你的新专辑！！",
              time: "2019年9月16日 18:43",
              commentNum: 1,
              like: 15,
              inputShow: false
            },
            {
              from: "李四",
              fromId: 1123,
              fromHeadImg: "http://localhost:8080/img/christian.8c64339c.jpg",
              to: "易烊千玺",
              toId: 19870621,
              comment: "别忘记宣传我们的合作单曲啊",
              time: "2019年9月16日 18:43",
              commentNum: 0,
              like: 5,
              inputShow: false
            }
          ]
        },
        {
          name: "Taylor Swift",
          id: 19891221,
          headImg: "http://localhost:8080/img/christian.8c64339c.jpg",
          comment: "我发行了我的新专辑Lover",
          time: "2019年9月16日 18:43",
          commentNum: 1,
          like: 5,
          inputShow: false,
          reply: [
            {
              from: "Lana Del Rey",
              fromId: 19870621,
              fromHeadImg:
                "https://p.qqan.com/up/2021-10/16352997791046933.jpg",
              to: "Taylor Swift",
              toId: 19891221,
              comment: "新专辑和speak now 一样棒！",
              time: "2019年9月16日 18:43",
              commentNum: 25,
              like: 5,
              inputShow: false
            }
          ]
        },
        {
          name: "Norman Fucking Rockwell",
          id: 20190830,
          headImg: "https://p.qqan.com/up/2021-11/16361656227691053.jpg",
          comment: "Plz buy Norman Fucking Rockwell on everywhere",
          time: "2019年9月16日 18:43",
          commentNum: 0,
          like: 5,
          inputShow: false,
          reply: []
        }
      ]
    };
  },
  directives: { clickoutside },
  methods: {
    inputFocus() {
      var replyInput = document.getElementById("replyInput");
      replyInput.style.padding = "8px 8px";
      replyInput.style.border = "2px solid blue";
      replyInput.focus();
    },
    showReplyBtn() {
      this.btnShow = true;
    },
    hideReplyBtn() {
      this.btnShow = false;
      replyInput.style.padding = "10px";
      replyInput.style.border = "none";
    },
    showReplyInput(i, name, id) {
      this.comments[this.index].inputShow = false;
      this.index = i;
      this.comments[i].inputShow = true;
      this.to = name;
      this.toId = id;
    },
    _inputShow(i) {
      return this.comments[i].inputShow;
    },
    sendComment() {
      if (!this.replyComment) {
        this.$message({
          showClose: true,
          type: "warning",
          message: "评论不能为空"
        });
      } else {
        let a = {};
        let input = document.getElementById("replyInput");
        let timeNow = new Date().getTime();
        let time = this.dateStr(timeNow);
        a.name = this.myName;
        a.comment = this.replyComment;
        a.headImg = this.myHeader;
        a.time = time;
        a.commentNum = 0;
        a.like = 0;
        this.comments.push(a);
        this.replyComment = "";
        input.innerHTML = "";
      }
    },
    sendCommentReply(i, j) {
      if (!this.replyComment) {
        this.$message({
          showClose: true,
          type: "warning",
          message: "评论不能为空"
        });
      } else {
        let a = {};
        let timeNow = new Date().getTime();
        let time = this.dateStr(timeNow);
        a.from = this.myName;
        a.to = this.to;
        a.fromHeadImg = this.myHeader;
        a.comment = this.replyComment;
        a.time = time;
        a.commentNum = 0;
        a.like = 0;
        this.comments[i].reply.push(a);
        this.replyComment = "";
        document.getElementsByClassName("reply-comment-input")[i].innerHTML =
          "";
      }
    },
    onDivInput: function(e) {
      // var str = e.target.innerText;
      this.replyComment = e.target.innerText;
      // this.replyComment = e.target.innerHTML;
    },
    dateStr(date) {
      //获取js 时间戳
      var time = new Date().getTime();
      //去掉 js 时间戳后三位，与php 时间戳保持一致
      time = parseInt((time - date) / 1000);
      //存储转换值
      var s;
      if (time < 60 * 10) {
        //十分钟内
        return "刚刚";
      } else if (time < 60 * 60 && time >= 60 * 10) {
        //超过十分钟少于1小时
        s = Math.floor(time / 60);
        return s + "分钟前";
      } else if (time < 60 * 60 * 24 && time >= 60 * 60) {
        //超过1小时少于24小时
        s = Math.floor(time / 60 / 60);
        return s + "小时前";
      } else if (time < 60 * 60 * 24 * 30 && time >= 60 * 60 * 24) {
        //超过1天少于30天内
        s = Math.floor(time / 60 / 60 / 24);
        return s + "天前";
      } else {
        //超过30天ddd
        var date = new Date(parseInt(date));
        return (
          date.getFullYear() +
          "/" +
          (date.getMonth() + 1) +
          "/" +
          date.getDate()
        );
      }
    }
  }
};
</script>

<style lang="stylus" scoped>
.my-reply
    padding 10px
    background-color #fafbfc
    .header-img
        display inline-block
        vertical-align top
	/* 输入框样式 */
    .reply-info
        display inline-block
        margin-left 5px
        width 97%
        @media screen and (max-width:1200px) {
            width 80%
        }
        .reply-input
            min-height 20px
            line-height 22px
            padding 10px 10px
            color #ccc
            background-color #fff
            border-radius 5px
            &:empty:before
                content attr(placeholder)
            &:focus:before
                content none
            &:focus
                padding 8px 8px
                border 2px solid blue
                box-shadow none
                outline none
    .reply-btn-box
        height 25px
        margin 10px
        .reply-btn
            position relative
            float right
            margin-right 15px
.my-comment-reply
    margin-left 50px
    .reply-input
        width flex
.author-title:not(:last-child)
    border-bottom: 1px solid rgba(178,186,194,.3)
.author-title
    padding 10px
    .header-img
        display inline-block
        vertical-align top
    .author-info
        display inline-block
        margin-left 5px
        width 60%
        height 40px
        line-height 20px
        >span
            display block
            cursor pointer
            overflow hidden
            white-space nowrap
            text-overflow ellipsis
        .author-name
            color #000
            font-size 18px
            font-weight bold
        .author-time
            font-size 14px
    .icon-btn
        width 30%
        padding 0 !important
        float right
        @media screen and (max-width : 1200px){
            width 20%
            padding 7px
        }
        >span
            cursor pointer
        .iconfont
            margin 0 5px
    .talk-box
        margin 0 50px
        >p
           margin 0
        .reply
            font-size 16px
            color #000
    .reply-box
        margin 10px 0 0 50px
        background-color #efefef

	/* 评论框 */
	.text {
	    font-size: 14px;
	  }

	  .item {
	    padding: 18px 0;
	  }

	  .box-card {
	    width: 840px;
		height: 1000px;
	  }
	  /* e-row样式*/
	  .el-row {
	      margin-bottom: 20px;
	      &:last-child {
	        margin-bottom: 0;
	      }
	    }
	    .el-col {
	      border-radius: 4px;
	    }
	    .bg-purple-dark {
	      background: #99a9bf;
	    }
	    .bg-purple {
	      background: #d3dce6;
	    }
	    .bg-purple-light {
	      background: #e5e9f2;
	    }
	    .grid-content {
	      border-radius: 4px;
	      min-height: 36px;
	    }
	    .row-bg {
	      padding: 10px 0;
	      background-color: #f9fafc;
	    }
</style>
